<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>

</head>
<body>
    
    <div id="app">
        <h1>{{person}}</h1>
        <button @click="change">change</button>
    </div>

    <script>

        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#app',
            data(){
                return {
                    person:['zhangs','xiaowang','li']
                }

            },

            methods:{
                change(){
                    // 如果直接对数据通过下标或长度等操作，是么有响应式的
                    // this.person[0] = 'huanga',
                    // this.person.length= 0 // 清空数组
                    // this.person[5] = 'lili'

                    //数组中有7个变更方法(改变了原始数组的值) 
                        // push pop shift unshift sort reverse splice
                    //vue重新的以上7个方法,以上7个方法在完成修改数组的前提下,还会重新渲染
                    this.person.push('xiaoxi')    

                    //相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。
                    // 它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组
                    this.person = this.person.filter((item)=>{
                        return item.startWith('xiao')
                    })
                },
            },

        })  ;
        // 我们自己重写push方法
        // const oldpush = Array.prototype.push;
        // Array.prototype.push = function(...args){
        //     oldPush.apply(this,...args);
        //     console.log('重新渲染')
        // }
        // console.log(oldpush);



    </script>
</body>
</html>